<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>

    <script>
        var currentPath = "/";
        $(document).ready(function () {
            //加载完成后发送获取文件列表请求
            $.ajax({
                url: "/files?path=/",
                type: "get",
                success: function (data) {
                    handleData(data);
                }
            });
            $("#createFolderBtn").click(function () {
                $("#exampleModalCenter").modal("hide");
                var name = $("#folderNameInput").val();
                $.ajax({
                    url: "/folder",
                    type: "post",
                    data: {
                        "folderName": name,
                        "parent": currentPath
                    },
                    success: function (data) {
                        loadThisFolder(currentPath);
                    }
                });
            });

            $("#fileInput").change(function () {
                var file = $(this).get(0).files[0];
                var data = new FormData();
                data.append("file",file);
                data.append("parent",currentPath);
                $.ajax({
                    url: "/files",
                    type: "post",
                    async:true,
                    processData:false,
                    contentType:false,
                    data: data,
                    success: function (data) {
                        loadThisFolder(currentPath);
                    }
                });
                $(this).val("");

            });


            function loadThisFolder(dirPath) {
                $(".file-list .list-group").empty();
                $.ajax({
                    url: "/files?path=" + dirPath,
                    type: "get",
                    success: function (data) {
                        currentPath = dirPath;
                        setTopNav();
                        handleData(data);
                    }
                });
            }

            function setTopNav() {
                $(".top-nav .breadcrumb").empty();
                $node = $("<li class=\"breadcrumb-item\"><a href=\"#\">根目录</a></li>");
                $node.attr("toPath", "/");

                $node.click(function () {
                    loadThisFolder($(this).attr("toPath"));
                });
                $(".top-nav .breadcrumb").append($node);

                var list = currentPath.substring(1, currentPath.length - 1);
                if (list === "/") {
                    return;
                }
                var dirs = list.split("/");
                for (var i = 0; i < dirs.length; i++) {
                    //将路径绑定
                    var tmpPath = "/";

                    for (var j = 0; j < i + 1; j++) {
                        tmpPath += dirs[j] + "/";
                    }
                    $node = $("<li class=\"breadcrumb-item\"><a href=\"#\">" + dirs[i] + "</a></li>");
                    $(".top-nav .breadcrumb").append($node);
                    $node.attr("toPath", tmpPath);
                    $node.click(function () {
                        loadThisFolder($(this).attr("toPath"));
                    })
                }

            }

            function loadNewFolder(data) {
                $(".file-list .list-group").empty();
                handleData(data);
            }

            function handleData(data) {
                for (var i = 0; i < data.length; i++) {
                    var $node = $(" <a href=\"#\" class=\"list-group-item list-group-item-action\">\n" +
                        data[i].name +
                        "            </a>");
                    $node.attr("name", data[i].name);
                    var isFolder = data[i].isFolder == 1 ? true : false;
                    if (isFolder) {
                        $node.css("background", "#eee");
                        $node.attr("isFolder", "true");

                        $node.click(function () {
                            var $that = $(this);
                            $.ajax({
                                url: "/files?path=" + currentPath + $that.attr("name") + "/",
                                type: "get",
                                success: function (data) {
                                    loadNewFolder(data);
                                    currentPath += $that.attr("name") + "/";
                                    setTopNav();
                                }
                            });
                        });
                    } else {
                        $node.css("background", "#fff");
                        $node.attr("isFolder", "false");
                    }
                    $(".file-list .list-group").append($node);
                }
            }
            

        });
    </script>
</head>
<body>
<div class="top-nav">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">根目录</a></li>
        </ol>
    </nav>
</div>

<div class="file-list">
    <div class="list-group">

    </div>
</div>
<div class="action-bar" style="margin-top: 10px;margin-left: 10px">
    <button id="uploadBtn" type="button" class="btn btn-outline-primary"
            style="position: relative;display: inline-block;overflow: hidden;">上传
        <input id="fileInput" type="file" multiple="multiple"
               style="position: absolute;right: 0;top: 0;opacity: 0;">
    </button>
    <button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#exampleModalCenter">
        新建文件夹
    </button>
</div>
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">新建文件夹</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <input type="text" class="form-control" id="folderNameInput" aria-describedby="emailHelp"
                       placeholder="输入文件夹名字">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="createFolderBtn">新建</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>